{extend name="public/pure"}
{block name="style"}
<title>美丽乡村</title>
<link rel="stylesheet" href="/home/css/country/index.css"> 
<style>
.camera{
    position: absolute;
    width: 16vw;
    top: 2vw;
    right: 2vw;
}
.showbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5%;
    background: rgba(0, 0, 0, 0.3);
}

.loader {
    position: relative;
    margin: 0 auto;
    width: 100px;
    margin-top: 70%;
}
.loader:before {
    content: '';
    display: block;
    padding-top: 50%;
}

.circular {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}
@keyframes color {
    100%,
    0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%,
    90% {
        stroke: #ffa700;
    }
}
</style>
{/block}
{block name="body"}
<div class="scroll" style="display: none;position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">
    <img class="banner" src="/home/images/index/banner.png">
    <div class="tabs">
        <div class="tabes">
            <a class="tab">美丽村庄</a>
            <a class="tab">三拆一改</a>
            <a class="tab">平安维稳</a>
        </div>
    </div>
    <div class="content">
        <div class="tab-list tab-list1 hidden">
            <div class="list basic">
                {empty name="list1"}
                <div class="default"><img src="/home/images/common/nomessage.png"></div>
                    {else/}
                <ul>
                    {volist name="list1" id="vo"}
                    <a href="{:Url('Country/detail?type=1&id='.$vo['id'])}">
                        <img src="{$vo.front_cover|get_covers='path'}">
                        <p>{$vo.title}</p>
                        <span>{$vo.publisher}</span>
                        <span>{$vo.time}</span>
                    </a>
                    {/volist}
                </ul>
                 {/empty}
            </div>
        </div>
        <div class="tab-list tab-list2 hidden">
            <div class="list basic">
                {empty name="list2"}
                <div class="default"><img src="/home/images/common/nomessage.png"></div>
                    {else/}
                <ul>
                    {volist name="list2" id="vo"}
                    <a href="{:Url('Country/detail?type=2&id='.$vo['id'])}">
                        <img src="{$vo.front_cover|get_covers='path'}">
                        <p>{$vo.title}</p>
                        <span>{$vo.publisher}</span>
                        <span>{$vo.time}</span>
                    </a>
                    {/volist}
                </ul>
                {/empty}
            </div>
        </div>
        <div class="tab-list tab-list3 hidden">
            <div class="list basic">
                {empty name="list3"}
                    <div class="default"><img src="/home/images/common/nomessage.png"></div>
                {else/}
                <ul>
                    {volist name="list3" id="vo"}
                    <a href="{:Url('Country/detail?type=3&id='.$vo['id'])}">
                        <img src="{$vo.front_cover|get_covers='path'}">
                        <p>{$vo.title}</p>
                        <span>{$vo.publisher}</span>
                        <span>{$vo.time}</span>
                    </a>
                    {/volist}
                </ul>
                {/empty}
            </div>
        </div>
</div>
    <div class="tip"></div>
    <div class="loading hidden">
        <div class="typing_loader"></div>
    </div>
</div>
<div class="showbox" >
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
<a id="publish" href="{:Url('Snapshot/snapshot')}" style="display: none"></a>
{/block}
{block name="script"}
<script src="/home/js/reset.js"></script>
<script>
    if( document.body.clientWidth>1000) {
        var time = null;
        clearInterval(time);
        time = setInterval(function () {
            $(".scroll").show();
            $(".showbox").hide();
            $("#publish").show();
        }, 1500);
    }else{
        $(".scroll").show();
        $(".showbox").hide();
        $("#publish").show();
    }
    $(function(){
        moveanyway();
        var c = getCookie("type")?getCookie("type"):0;
        $('.tabes>.tab').eq(c).addClass('active');
        $('.tab-list').eq(c).removeClass('hidden');
        var len = $('.tab-list').eq(c).find('.list a').length;
        if(len >= 12){
            $('.tip' ).text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',loadScroll);

        }
    });
    $(".scroll").off("scroll" ).on("scroll",function(){
        if($(".scroll").scrollTop()>$(".banner").height()){
            $(".tabs").addClass("fixed");
        }else{
            $(".tabs").removeClass("fixed");  
        }
    })

    $('.tabes>.tab').on('click',function(){
        var tabList = $(".tab-list");
        var eq = $(this).index();
        $(this).siblings('a').removeClass('active');
        $(this).addClass('active');
        tabList.eq(eq).siblings('.tab-list').addClass('hidden');
        tabList.eq(eq).removeClass('hidden');
        var len = tabList.eq(eq).find('.list a').length;
        if(len >= 12){
            $('.tip' ).text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',loadScroll);
        }else{
            $('.tip' ).hide();
            document.getElementsByClassName("scroll")[0].removeEventListener('scroll',loadScroll);
        }
        //使用示例
        setCookie("type",eq);
    });

    var scrollNow = true;
    function loadScroll(){
            var type = getCookie("type");
            var tabList = $(".tab-list");
            var len = tabList.eq(type).find('.list a').length;
            var tp = parseInt(type)+1;
            var tip = $(".tip");
            var loading = $('.loading');
        console.log(tp)
            var el = document.getElementsByClassName("scroll")[0];
            if(el.scrollTop + el.offsetHeight + 2 >= el.scrollHeight && scrollNow){
                scrollNow = false;//请求执行中
                $.ajax({
                    type: 'post',
                    url: "{:Url('Country/listMore')}",
                    data: {
                        length:len,
                        type:tp
                    },
                    beforeSend: function(XMLHttpRequest){
                        tip.hide();
                        loading.toggleClass('hidden');
                    },
                    success:function(data){
                        loading.toggleClass('hidden');
                        tip.show();
                        if(data.code == 1){
                            addList(data,type);
                            var dataLen =data.data.length;
                            if(data.data.length == 5){
                                tip.text('上拉加载更多');
                            }else{
                                tip.text('没有更多了');
                                document.getElementsByClassName("scroll")[0].removeEventListener('scroll',loadScroll);
                            }
                        }else{
                            tip.text('没有更多了');
                            document.getElementsByClassName("scroll")[0].removeEventListener('scroll',loadScroll);
                        }
                        scrollNow = true;//请求结束
                    }
                })
            }
    }

    function addList(data,type){
        console.log(data)
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            html +=
                    '<a href="/home/country/detail/id/' + list.id + '">' +
                    '<img src="'+list.img+'">'+
                    '<p>'+list.title+'</p>'+
                    '<span>'+list.publisher+'</span>'+
                    '<span>'+list.time+'</span>'+
                    '</a>'
        }

        $('.tab-list').eq(type).find("ul").append(html);
    }


    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                    , totalScroll = el.scrollHeight
                    , currentScroll = top + el.offsetHeight;
            if(top === 0) {
                el.scrollTop = 1;
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
        el.addEventListener('touchmove', function(evt) {
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true;
        });
    }

    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        if(!evt._isScroller) {
            evt.preventDefault();
        }
    });

    $(".camera").on("click",function(){
        window.location.href = "/home/snapshot/snapshot.html"
    })


    var timeOutEvent=0;
    $(function(){
        $(".tab").each(function() {
            var that = $(this);
            $(this).on({
                touchstart: function (e) {
                    timeOutEvent = setTimeout(function(){
                        timeOutEvent = 0;
                        that.addClass("press");
                    }, 500);
                },
                touchmove: function () {
                    clearTimeout(timeOutEvent);
                    timeOutEvent = 0;
                    that.removeClass("press").addClass("ripple");
                },
                touchend: function () {
                    that.removeClass("press").addClass("ripple");
                    clearTimeout(timeOutEvent);
                    if (timeOutEvent != 0) {

                    }
                }
            })
        })
    });

</script>
{/block}